<template>
    <view>
        <block v-if="zhuan.is_rank == '1'">
            <navigator
                class="count_rank"
                :url="'/wxz_wzbagent/pages/count_rank/index?special_id=' + zhuan.special_id"
                style="display: block; position: fixed; top: 50%; right: 0; z-index: 100"
            >
                <image class="count_rank_img" src="/static/wxz_wzbagent/resource/images/count_rank.jpg" style="width: 100rpx; height: 100rpx"></image>
            </navigator>
        </block>
        <view v-if="kp_time" class="kp_div" :style="'width:' + winWid + 'px;height:' + winHei + 'px;'">
            <view class="tiao" @tap="tiaoguo">{{ kp_time }}s 跳过</view>
            <image class="kpImg" :src="zhuan.kp_img" :style="'width:' + winWid + 'px;height:' + winHei + 'px;'"></image>
        </view>
        <view
            v-if="wxapp_id != zhuan.wxapp_id && zhuan.last_qrcode_img"
            @tap="jumpNew"
            style="position: fixed; background: #000; opacity: 0.7; width: 100%; height: 100%; top: 0; left: 0; z-index: 999"
        ></view>
        <popupwindow
            v-if="wxapp_id != zhuan.wxapp_id && zhuan.last_qrcode_img"
            showClose="0"
            visible="1"
            :contentImage="zhuan.last_qrcode_img"
            contentHeight="350"
            :outClickCanClose="false"
        ></popupwindow>

        <view
            @animationend="eh"
            @animationiteration="eh"
            @animationstart="eh"
            class="page"
            hover-class="none"
            hover-start-time="50"
            hover-stay-time="400"
            id="_n_10"
            start-time="50"
            stay-time="400"
            v-else
        >
            <!-- <view class="page-head" hover-class="none" hover-start-time="50" hover-stay-time="400" id="_n_7" start-time="50" stay-time="400" >
    <swiper class="swiper" current="0" display-multiple-items="1" duration="500" easing-function="default" id="_n_6" indicator-active-color="#5AB0FF" indicator-color="rgba(0, 0, 0, .3)" interval="5000" next-margin="32rpx"  previous-margin="0px" multiple-items="1" active-color="#5AB0FF"></swiper>
  </view> -->
            <view class="carousel">
                <swiper class="carousel_swiper" :indicator-dots="true" indicator-color="#f4f4f4" indicator-active-color="#4eb8b8" :autoplay="true" interval="3000" :circular="true">
                    <block v-for="(item, index) in lunbo" :key="item.key">
                        <swiper-item>
                            <image class="carouselImg" :src="item.img_url" mode="aspectFill"></image>
                        </swiper-item>
                    </block>
                </swiper>
            </view>
            <view class="video" v-if="zhuan.video">
                <video :src="zhuan.video"></video>
            </view>
            <view class="nav-tab" hover-class="none" hover-start-time="50" hover-stay-time="400" id="_n_8" start-time="50" stay-time="400">
                <view
                    class="page-tab"
                    v-if="search_status == 0"
                    :style="(zhuan.show_search == 1 ? 'width: calc(100% - 82rpx)' : 'width:100%') + '; ' + (showAllCate ? 'flex-wrap: wrap;' : '')"
					>
                    <view :style=" ' ' +(tab == item.special_id && tmp_color ? 'border-color:' + tmp_color + ';background: ' + tmp_color + ';' : '') +(tab == item.special_id && font_color ? 'color:' + font_color + ';' : '') "
                        @tap="bindtab"
                        :class="'page-tab-item ' + (tab == item.special_id ? 'selected' : '')"
                        :data-id="item.special_id"
                        :data-index="index"
                        v-for="(item, index) in twoCate"
                        :key="index"
						>
                        <view class="page-tab-type">
                            <text>{{ item.special_name }}</text>
                        </view>
                    </view>
                </view>
                <view class="page-tab" v-else>
                    <input @blur="bindInput" name="search" data-required="1" placeholder="请输入您要搜索的直播标题" type="text" :value="search" />
                </view>
                <view id="search" @tap="searchFun" v-if="zhuan.show_search == 1 && showAllCate != 1">
                    <view class="ex-search">
                        <image src="/static/wxz_wzbagent/resource/images/sou.png"></image>
                    </view>
                </view>
                <view id="show-all" @tap="showAll" v-if="twoCate.length > 4 && search_status == 0">
                    <text>{{ showAllCate == 1 ? '▲' : '▼' }}</text>
                </view>
            </view>

            <view id="content" v-if="tab != 0">
                <view class="live_all" :style="'display: block;' + (tmp_color ? 'background: ' + tmp_color + ';' : 'background-color:#fff;') + 'min-height:800rpx;width:750rpx;'">
                    <view style="width: 100%; height: 20rpx; background: #f5f4f4"></view>
                    <view v-for="(item, index) in twoCate[index].livelist" :key="index"  >
                        <a :href="ali_url+ item.ali_url"  style="display:inline-block;color: #000000;text-decoration:none;width: 94%;padding: 0 3%" >   
						 <li style="width: 100%; background: white; list-style-type: none">
                                <view :style=" 'overflow:hidden;width: 100%;line-height:80rpx;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;' +
                                        (tmp_color ? 'background: ' + tmp_color + ';' : '') +
                                        (font_color ? 'color:' + font_color + ';' : '')">
                                    {{ item.title }} 
                                    <view
                                        style="margin-left: 10rpx; float: right; color: #868686; font-size: 22rpx; height: 44rpx; line-height: 44rpx; margin-top: 20rpx"
                                        v-if="zhuan.num_show"
                                    >
                                        <view style="width: 44rpx; height: 44rpx; float: left">
                                            <image src="/static/wxz_wzbagent/resource/images/eye.png" style="width: 30rpx; height: 30rpx; padding-top: 7rpx"></image>
                                        </view>
                                        <text style="line-height: 44rpx">{{ item.total_num }}</text>
                                    </view>
                                </view>
                                <view style="position: relative; width: 100%; height: 300rpx">
                                    <image :src="item.live_cover" style="width: 100%; height: 300rpx; border-radius: 20rpx"></image>
                                    <view style="
                                            position: absolute;
                                            border-radius: 0 0 20rpx 20rpx;
                                            width: 100%;
                                            height: 50rpx;
                                            background-color: rgba(0, 0, 0, 0.3);
                                            z-indent: 2;
                                            bottom: 0;
                                            text-align: center; " >
                                        <text style="line-height: 50rpx; color: #fff">{{ item.start_at }}</text>
                                    </view>
                                </view>
                            </li>
                            <view style="width: 100%; height: 20rpx"></view>
                        </a>

                        <view :style="'width:100%;height:20rpx;' + (tmp_color ? 'background:' + tmp_color + ';' : 'background-color:#f5f4f4;')"></view>
                    </view>
                </view>

                <!-- <view class="live_all" style="display: block;background:#f5f5f5;min-height:800rpx;width:750rpx;" wx:if="{{index !== 0}}">
      <view  wx:for="{{twoCate[index].livelist}}" style="width:47%;margin-left:2%;float:left;margin-top:16rpx;">
        <navigator url="/wxz_wzbagent/pages/movie/movie?rid={{item.rid}}&id={{item.id}}" style="background:#fff;color: #000000;border-radius:20rpx;">
            <li style="background: white;list-style-type:none;">
                <view style="position:relative;width: 100%;height: 220rpx;">
                  <image src="{{item.live_cover}}"  style="width: 100%;height: 220rpx;border-radius:20rpx 20rpx 0 0;"></image>
                  <view style="position:absolute;width:100%;height:40rpx;background-color:rgba(0,0,0,0.3);z-indent:2;bottom:0;text-align:center;"><text style="line-height: 40rpx;color:#fff;">{{item.start_at}}</text></view>
                </view>
                <view style="overflow:hidden;min-height:80rpx;max-height:80rpx;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;padding: 10rpx 30rpx;font-size:32rpx;">
                  {{item.title}}
                </view>
            </li>
            <view style="width:100%;height:20rpx;"></view>
        </navigator>
      </view>
      <view style="clear:both;"></view>
    </view> -->

                <view style="clear: both"></view>
            </view>
            <view :class="'footer ' + themes">{{ zhuan.copyright_text }}</view>
        </view>
    </view>
</template>

<script>
var t = require('../../resource/js/chat/webim.js');
var e = require('../../resource/js/chat/webim_handler.js');
var a = require('../../resource/js/chat/tls.js');

var app = getApp();
import popupwindow from '@/component/popupwindow/popupwindow.vue';
export default {
	components: {
		popupwindow
	},
    data() {
        return {
            id: 0,
			ali_url:"http://h5live.amsnowy.cn/h5jump/#/?url=",
            zhuan: {
                is_rank: '',
                special_id: '',
                kp_img: '',
                wxapp_id: '',
                last_qrcode_img: '',
                video: '',
                show_search: 0,
                num_show: '',
                copyright_text: ''
            },

            lunbo: {},
            twoCate: {},
            tmp_color: '',
            font_color: '',
            xiang_status: 1,
            tab: 0,
            index: 0,
            search_status: 0,
            search: '',
            kp_time: 0,

            //开屏显示状态
            need_jump: 0,

            winWid: '',
            winHei: '',
            wxapp_id: '',
            showAllCate: 0,
            livelist: [],
            themes: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
		var that = this;
        this.getSpecialShareData(options.id);
        that.setData({
            winWid: uni.getSystemInfoSync().windowWidth,
            //获取当前屏幕的宽度
            winHei: uni.getSystemInfoSync().windowHeight,
            //获取当前屏幕的高度
            wxapp_id: getApp().globalData.siteInfo.wxapp_id
        });
        const scene = decodeURIComponent(options.scene);
        if (scene !== 'undefined') {
            scene.split('&').forEach((item) => {
                const key = item.split('=')[0];
            });
        } else {
            that.setData({
                id: options.id
            });
        }
        that.get_zhuan(0, 1);
    },
    //上拉刷新
    onPullDownRefresh() {
        var that = this;
        that.setData({
            xiang_status: 1,
            tab: 0,
            index: 0,
            search_status: 0,
            search: ''
        });
        that.get_zhuan(0, 1);

        // 处理完成后，终止下拉刷新
        uni.stopPullDownRefresh();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        uni.hideHomeButton();
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    methods: {
        get_zhuan: function (search, kp) {
            var that = this;
            if (!that.id) {
                var id = uni.getStorageSync('special_id');
                that.setData({
                    id: id
                });
            } else {
                uni.setStorage({
                    key: 'special_id',
                    data: that.id
                });
                uni.setStorage({
                    key: 'page',
                    data: 'new_zhuan_index'
                });
            }
            if (search) {
                var data = {
                    id: that.id,
                    search: search,
                    cid: that.tab
                };
            } else {
                var data = {
                    id: that.id,
                    cid: that.tab
                };
            }
            app.globalData.util.request({
                url: 'lives_new&r=get_zhuan2',
                data: data,
                cachetime: '1',
                showLoading: true,
                success: function (t) {
                    var a = t.data.data;
                    that.setData({
                        zhuan: a.zhuan,
                        lunbo: a.lunbo,
                        twoCate: a.twoCate,
                        tab: a.cid
                    });
                    if (!search && !that.tab) {
                        that.setData({
                            tab: a.twoCate[0].special_id
                        });
                    }
                    if (a.zhuan.tmp_color) {
                        that.setData({
                            tmp_color: 'rgb(' + a.zhuan.tmp_color + ')'
                        });
                    }
                    if (a.zhuan.font_color) {
                        that.setData({
                            font_color: 'rgb(' + a.zhuan.font_color + ')'
                        });
                    }

                    // //格式化选手页面规则详情
                    //i.wxParse('content', 'html', a.zhuan.content, that, 5)
                    that.article_content = that.escape2Html(a.zhuan.content);
                    // //设置页面标题
                    uni.setNavigationBarTitle({
                        title: a.zhuan.special_name
                    });
                    //开屏
                    if (a.zhuan.kp_status == 1 && kp == 1) {
                        that.setData({
                            kp_time: 3
                        });
                        that.kp_strat();
                    }
                    that.bg_mp3();
                }
            });
        },

        bg_mp3() {
            if (this.zhuan.live_mp3_status == 1) {
                // 获取BackgroundAudioManager 实例
                this.back = uni.getBackgroundAudioManager();
                // 对实例进行设置
                console.log(this.zhuan.live_mp3);
                this.back.src = this.zhuan.live_mp3;
                this.back.title = '背景音乐'; // 标题为必选项
                this.back.play(); // 开始播放
            }
        },

        // 开屏开始
        kp_strat: function () {
            var that = this;
            var kp_timer = setInterval(function () {
                var kp_time = that.kp_time;
                kp_time--;
                //倒计时结束
                if (kp_time < 1) {
                    clearInterval(kp_timer);
                    that.setData({
                        kp_time: 0
                    });
                } else {
                    that.setData({
                        kp_time: kp_time
                    });
                }
            }, 1000);
        },

        // 跳过开屏
        tiaoguo: function () {
            var that = this;
            that.setData({
                kp_time: 0
            });
        },

        xiang_btn: function () {
            var that = this;
            that.setData({
                xiang_status: 0
            });
        },

        guan: function () {
            var that = this;
            that.setData({
                xiang_status: 1
            });
        },

        bindtab: function (t) {
            var e = t.currentTarget.dataset.id;
            var index = t.currentTarget.dataset.index;
            this.setData({
                tab: e,
                index: index
            });
        },

        bindInput: function (t) {
            var that = this;
            var a = t.detail.value;
            that.setData({
                search: a
            });
        },

        showAll: function () {
            if (this.showAllCate == 1) {
                this.setData({
                    showAllCate: 0
                });
            } else {
                this.setData({
                    showAllCate: 1
                });
            }
        },

        //搜索
        searchFun: function () {
            var that = this;
            if (that.search_status == 0) {
                that.setData({
                    search_status: 1
                });
            } else {
                if (that.search) {
                    that.get_zhuan(that.search, 0);
                } else {
                    that.get_zhuan(0, 0);
                }
                that.setData({
                    search_status: 0
                });
            }
        },

        //小程序分享
        onShareAppMessage1: function () {
            return {
                title: this.zhuan.special_name,
                path: '/wxz_wzbagent/pages/zhuan/ali_index?id=' + this.id
            };
        },

        onShareTimeline1: function () {
            return {
                title: this.zhuan.special_name,
                path: '/wxz_wzbagent/pages/zhuan/ali_index?id=' + this.id
            };
        },

        jumpNew() {
            console.log('占位：函数 jumpNew 未声明');
        },

        eh() {
            console.log('占位：函数 eh 未声明');
        }
    }
};
</script>
<style>
@import './ali_index.css';
</style>
